<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车管理</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/goods.css">
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1 class=" panel-title  my-title">购物车</h1>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                      <label for="good-id">id:</label>
                      <input disabled v-model.number="goodID" type="text" class="form-control" id="good-id" placeholder="商品id">
                    </div>
                    <div class="form-group">
                      <label for="good-name">name:</label>
                      <input @keyup.enter="add" v-model="goodName" type="text" class="form-control" id="good-name" placeholder="商品名称">
                    </div>
                    <button @click="add" type="button" class="btn btn-success btn-sm">添加</button>
                    <div class="form-group">
                        <label for="keywords">关键字搜索:</label>
                        <input v-model="key" type="text" class="form-control" id="keywords" placeholder="关键字">
                      </div>
                  </form>
            </div>
            <div v-if="search.length>0">
                <table class="table table-striped table-hover table-bordered">
                    <tr>
                        <th>序号</th>
                        <th>名字</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                    
                    <tr 
                        
                        v-for="(item,index) in search"
                        :key="item.id"
                        :class="[index%2==0?'danger':'info']"
                        >
                            <td>{{index}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price | moenyFlag}}</td>
                            <td>
                                <button :disabled="item.count<=1" @click="decreame(item)" class="btn btn-default" href="#">-</button>
                                {{item.count}}
                                <button @click="increame(item)" class="btn btn-default" href="#">+</button>
                            </td>
                           
                            <td>
                                <a href="#" @click.prevent="remove(index)">删除</a>
                            </td>
                    </tr>
               
                
                
                </table>
            </div>
            <div v-else>
                <h1>暂无数据</h1>
            </div>
           
            <div class="panel-footer">
                总价：{{totalPrice | moenyFlag}}
            </div>
          </div>
    </div>
</body>
<script src="../../vue文件/vue.js"></script>
<script src="./bootstrap-3.3.7-dist/js/cart.js"></script>

</html>